<template>
  <div>
    <div class="div">
      <div>
        <van-icon name="arrow-left" class="icon1" />
      </div>
      <div class="div2">
        <div class="shenyang" @click="push">
          {{ names }}
          <van-icon name="arrow-down" />
          <span class="span">|</span>
          <van-icon name="search" class="sousuo" />
          <span class="dizhi">请输入小区或地址</span>
        </div>
      </div>
      <div class="div3">
        <van-icon name="upgrade" class="icon" @click="mapFn" />
      </div>
    </div>

    <van-sticky>
      <!-- <van-tabs animated sticky offset-top="1.226667rem" @click="addsity">
        <van-tab title="区域"></van-tab>
        <van-tab title="方式"></van-tab>
        <van-tab title="租金"></van-tab>
        <van-tab title="筛选"></van-tab>
      </van-tabs> -->

      <!--  -->
      <van-dropdown-menu>
        <van-dropdown-item title="区域" ref="item">
          <van-picker
            toolbar-position="bottom"
            show-toolbar
            @confirm="add"
            @cancel="dele"
            :columns="areas"
          />
        </van-dropdown-item>
        <van-dropdown-item title="方式" ref="item">
          <van-picker
            toolbar-position="bottom"
            show-toolbar
            @confirm="add"
            @cancel="dele"
            :columns="price"
          />
        </van-dropdown-item>
        <van-dropdown-item title="租金" ref="item">
          <van-picker
            toolbar-position="bottom"
            show-toolbar
            @confirm="add"
            @cancel="dele"
            :columns="datasss"
          />
        </van-dropdown-item>
        <!-- <van-dropdown-item title="筛选" ref="item" @click="showPopup">

        </van-dropdown-item> -->
        <div class="shai" @click="showPopup">筛选</div>
        <!-- 筛选 -->
        <van-popup v-model="showBool" position="right">
          <div class="bodys">
            <div>户型</div>
            <ul>
              <li v-for="(item, i) in type" :key="i" @click="huxing($event)">
                {{ item }}
              </li>
            </ul>
            <div>朝向</div>
            <ul>
              <li
                v-for="(item, i) in towards"
                :key="i"
                @click="chaoxiang($event)"
              >
                {{ item }}
              </li>
            </ul>
            <div>楼层</div>
            <ul>
              <li v-for="(item, i) in floor" :key="i" @click="louceng($event)">
                {{ item }}
              </li>
            </ul>
            <div>房屋亮点</div>
            <ul class="uls">
              <li
                v-for="(item, i) in houses"
                :key="i"
                @click="liangdian($event)"
              >
                {{ item }}
              </li>
            </ul>

          </div>
          <div class="footer">
              <div class="qing">清除</div>
              <div class="que">确定</div>
            </div>
        </van-popup>
      </van-dropdown-menu>
      <!--  -->
      <van-overlay :show="show" @click="show = false">
        <van-picker
          toolbar-position="bottom"
          show-toolbar
          @confirm="add"
          @cancel="dele"
          :columns="rentType"
        />
      </van-overlay>
    </van-sticky>

    <van-card
      v-for="item in houseList"
      :key="item.id"
      :price="item.price + '元/月'"
      :desc="item.desc"
      title="商品标题"
      :thumb="'http://liufusong.top:8080' + item.houseImg"
    >
      <template #tags>
        <van-tag type="primary" v-for="(item, i) in item.tags" :key="i">{{
          item
        }}</van-tag>
      </template>
    </van-card>
    <router-view></router-view>
    <van-tabbar route>
      <van-tabbar-item icon="wap-home-o" to="/home"> 首页 </van-tabbar-item>
      <van-tabbar-item icon="search" to="/home/list">找房</van-tabbar-item>
      <van-tabbar-item icon="newspaper-o" to="/home/news">资讯</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/home/profile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// HousesAPI
import { ditionAPI, deepcopy, HousesAPI, gitUserAPI } from '@/api/index.js'
export default {
  data () {
    return {
      // 数据一
      areas: [],
      // 价格
      price: [],
      // 整租
      rentType: [],
      arr: 1,
      // 数据二d
      // 数据三
      keys: false,
      houseList: [],
      show: false,
      showBool: false,
      // 分类
      type: ['一室', '二室', '三室', '四室', '四室+'],
      // 朝向
      towards: ['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
      // 楼层
      floor: ['高楼层', '低楼层', '中楼层'],
      // 房屋亮点
      houses: [
        '集中供暖',
        '双卫生间',
        '近地铁',
        '随时看房',
        '精装公寓',
        '独立卫生间',
        '押一付一',
        '独立阳台',
        '月租',
        '限女生',
        '限男生',
        '新上'
      ]
    }
  },
  async created () {
    this.getHouseList()
    // 房屋请求
    const res = await gitUserAPI({
      authorization: window.localStorage.getItem('token')
    })
    console.log(res)
  },
  methods: {
    mapFn () {
      this.$router.push('/map')
    },
    async getHouseList () {
      const { data: res } = await HousesAPI()
      this.houseList = res.body.list
      const { data: res2 } = await ditionAPI({
        id: window.localStorage.getItem('value')
      })
      deepcopy(this.houseList, res2.body)
      this.areas.push(this.houseList.area, this.houseList.subway)
      this.price = this.houseList.price
      this.rentType = this.houseList.rentType
      for (let i = 0; i < this.areas.length; i++) {
        if (this.areas[i].children[0]) {
          this.areas[i].children[0].children = [{ text: '' }]
        }
      }
    },
    push () {
      this.$router.push('/city')
    },
    addsity1 () {
      this.arr = 2
      this.keys = !this.keys
      this.show = true
      console.log(this.arr)
    },
    addsity2 () {
      this.arr = 3
      this.keys = !this.keys
      this.show = true
      console.log(this.arr)
    },
    addsity3 () {
      this.arr = 4
      this.keys = !this.keys
      this.show = true
      console.log(this.arr)
    },
    add () {
      console.log('我点击了确认按钮')
      this.keys = false
      this.getHouseList()
    },
    dele () {
      console.log('我点击了取消按钮')
      this.keys = false
    },
    showPopup () {
      this.showBool = true
      console.log(111)
    },
    // 筛选侧边栏区域
    huxing (e) {
      e.target.classList.toggle('bordercolor')
    },
    chaoxiang (e) {
      e.target.classList.toggle('bordercolor')
    },
    louceng (e) {
      e.target.classList.toggle('bordercolor')
    },
    liangdian (e) {
      e.target.classList.toggle('bordercolor')
    }
  },
  computed: {
    names () {
      return window.localStorage.getItem('label')
    },
    datasss () {
      if (this.arr === 2) {
        return this.areas
      } else if (this.arr === 3) {
        return this.price
      } else {
        return this.rentType
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar__left {
  cursor: pointer;
}

/deep/.van-tabs__line {
  background-color: #fff;
}

.img {
  width: 106px;
  height: 80px;
}

/deep/.van-card__title {
  font-size: 16px;
  margin-bottom: 5px;
}

/deep/.van-card__desc {
  color: #b0b2b3;
}

/deep/.van-card__price-integer {
  color: #e8634c;
}

/deep/.van-card__price-currency {
  opacity: 0;
}

.div {
  background-color: #58b67f;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

.icon1 {
  color: #fff;
  margin-top: 12px;
  margin-left: 8px;
}

.div2 {
  width: 274px;
  height: 34px;
  background-color: #fff;
  margin-top: 8px;
}

.div3 {
  margin-right: 25px;
  color: #fff;
  margin-top: 10px;
}

.shenyang {
  font-size: 15px;
  margin-top: 5px;
  margin-left: 7px;
}

.span {
  margin-left: 3px;
  color: #e5e5e5;
}

.dizhi {
  color: #b9bbbc;
  font-size: 14px;
}

.sousuo {
  color: #b9bbbc;
  margin-left: 15px;
  font-size: 16px;
  margin-top: 3px;
}

.divss {
  height: 44px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  font-size: 14px;
  line-height: 44px;
}
/deep/.van-picker__cancel {
  background-color: #fff;
  height: 50px;
  width: 125px;
  color: #70b483;
}
/deep/.van-picker__confirm {
  background-color: #70b483;
  height: 50px;
  width: 250px;
  color: #fff;
}
/deep/.van-picker {
  margin-top: 100px;
}
/deep/.van-dropdown-menu {
  width: 281.25px;
}
.shai {
  font-size: 16px;
  width: 93.75px;
  height: 48px;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: 50px;

  line-height: 48px;
  text-align: center;
}
/deep/.van-sticky {
  box-shadow: 0 0.05333rem 0.32rem rgb(100 101 102 / 12%);
}
.van-popup {
  width: 79%;
  height: 100vh;
  // margin-left: 187.5px;
}
.bodys {
  padding: 0px 15px 0;
  div {
    font-size: 16px;
    margin: 20px 0;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 14px;
    &:last-child {
      border-bottom: 0px;
    }
  }
  ul {
    width: 255px;
    // height: 156px;
    margin-left: 45px;
    li {
      font-size: 12px;
      color: #888;
      border: 1px solid #ddd;
      margin: 0 18px 15px 0;
      display: inline-block;
      height: 32px;
      width: 70px;
      text-align: center;
      line-height: 32px;
      border-radius: 3px;
    }
  }
  .bordercolor {
    border: 1px solid #21b97a;
    color: #21b97a;
    background-color: #defaef;
  }
}
.footer{
  // position: fixed;
  display: flex;
  width: 100%;
  bottom: 0px;
  .qing {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    flex: 1 1;
    border-radius: 0;
    background-color: #fff;
    color: #21b97a;
  }
  .que {
    border-radius: 0;
    flex: 2 1;
    color: #fff;
    background-color: #21b97a;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
  }
}
// .footer {
//   position: fixed;
//   bottom: 0;
//   right: 0;
//   width: 295px;
//   height: 51px;
//   display: flex;
//   justify-content: space-evenly;
//   .qing {
//     height: 50px;
//     line-height: 50px;
//     text-align: center;
//     font-size: 18px;
//     flex: 1 1;
//     border-radius: 0;
//     background-color: #fff;
//     color: #21b97a;
//   }
//   .que {
//     border-radius: 0;
//     flex: 2 1;
//     color: #fff;
//     background-color: #21b97a;
//     height: 50px;
//     line-height: 50px;
//     text-align: center;
//     font-size: 18px;
//   }
// }
</style>
